<template>
  <div class="patient_main">
    <div class="main" style="padding-bottom: 0px;">
      <div class="pay">
        <div class="preview">
          <div class="preview-content">
            <div class="preview-content-text one-line">
              <span>{{ answer.question }}</span>
              <span class="hide-span">{{ answer.question }}</span>
              <div class="expand-btn">
                <div class="expand-btn-con">
<!--                  <span>收起</span>-->
                  <span>展开</span>
<!--                  <img src="../assets/pay/向上2.png" class="icon-font icon-ic_expand_up1">-->
                  <img src="../../assets/pay/向下2.png" class="icon-font icon-ic_expand_up1">
                </div>
              </div>
            </div>
          </div>
          <div class="file-list">
            <img :src="item.url" class="file-list-item" v-for="(item, key) in answer.imageUrlList" :key="key"/><!---->
          </div>
        </div>
        <div class="dxd-cell dxd-cell-hasborder">
          <div class="dxd-cell-left"><!---->
            <img :src="doctor.doctor_info.avatar" class="user-avatar">
          </div>
          <div class="dxd-cell-main">
            <div class="user-title"><span
                class="usre-doctor-name">{{ doctor.doctor_info.name }}</span>
              <!----></div>
            <div class="sub-title">{{ doctor.doctor_info.department_name }} {{ doctor.doctor_info.hospital_name }}</div>
          </div>
          <div class="dxd-cell-right"><!----><!----></div>
          <div class="user-price">¥{{ doctor.doctor_info.price }}</div><!----></div>
        <div class="dxd-cell dxd-cell-hasborder"><!---->
          <div class="dxd-cell-main">
            <div class="title">优惠方式</div>
          </div>
          <div class="dxd-cell-right" @click="toCoupon"><!---->
            <div v-if="pay.coupon_name == ''"> 无可用优惠券</div>
            <div v-else> {{ pay.coupon_name }}</div>
          </div>
          <img src="../../assets/向右箭头.png" class="icon-font icon-ic_arrow_little arrow" @click="toCoupon">
        </div>
        <div class="dxd-cell dxd-cell-hasborder"><!---->
          <div class="dxd-cell-main">
            <div class="title">权益保障</div>
          </div>
          <div class="dxd-cell-right"><!---->
            <div> 预计3小时内回复，超过24小时自动退款</div>
          </div><!----></div>
        <div class="dxd-cell dxd-cell-hasborder"><!---->
          <div class="dxd-cell-main">
            <div class="title">公开问题</div>
            <div class="public"><span
                class="public-count">13,547,555</span>人公开了问题，帮助更多的人
            </div>
          </div>
          <div class="dxd-cell-right"><!----><!----></div>
          <img src="../../assets/pay/开关-开.png" class="switch" v-if="pay.is_public" @click="pay.is_public = !pay.is_public"/>
          <img src="../../assets/pay/开关-关.png" class="switch" v-else @click="pay.is_public = !pay.is_public"/>
<!--          <input type="checkbox" class="switch">&lt;!&ndash;&ndash;&gt;-->
        </div>
        <div class="agreement">
            <img src="../../assets/ForgetSuccess.png" class="icon-font icon-ic_selected_green checked"/>
<!--            <img src="../assets/ForgetError.png" class="icon-font icon-ic_selected_green"/>-->

          我已阅读并同意 <span class="agreement-hotspot"> 《风险告知及患者知情同意书》 </span></div>
        <div class="iphone-x">
          <div class="payment">
            <div class="payment-tip">
              <div class="payment-tip-price"> 合计：<span class="sum">¥{{ pay.price }}</span>
              </div>
            </div>
            <div class="payment-button" @click="submit_order">立即支付</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import doctor from "../../api/doctor.js";
import {ElMessage, ElMessageBox} from "element-plus";
import { useRouter, useRoute} from "vue-router";
import answer from "../../api/answer.js";
import pay from "../../api/pay.js";
const router = useRouter()
const route = useRoute()

const toCoupon=()=>{
  router.push('/coupon')
}
const submit_order=()=>{
  let token = sessionStorage.access_token || localStorage.access_token;
  pay.create_order(token)
}


</script>

<style scoped>
.patient_main {
  background-color: #f4f4f4;
}

.main {
  width: 768px;
  height: 590px;
  margin: 0 auto;
}
.pay .preview {
  margin-bottom: 10px;
  background-color: #fff;
}
.pay .preview-content {
  padding: 15px 16px;
  position: relative;
}
.pay .preview-content-text.one-line {
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
.pay .preview-content-text {
  color: #4d4d4d;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-all;
}
.pay .preview-content .hide-span {
  position: fixed;
  top: -10000px;
  left: -10000px;
  width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
}
.pay .preview-content:after {
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  box-sizing: border-box;
  height: 1px;
  background-color: #ebebeb;
  transform: scaleY(.5);
  content: "";
}
.file-list {
  padding: 12px 16px;
  /*overflow-y: scroll;*/
  white-space: nowrap;
}
.file-list-item:not(:last-child) {
  margin-right: 8px;
}
.file-list-item {
  display: inline-block;
  width: 50px;
  height: 50px;
  object-fit: cover;
}
.dxd-cell-hasborder {
  position: relative;
}
.dxd-cell {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 20px 16px;
  color: #333;
  font-size: 16px;
  line-height: 18px;
  background-color: #fff;
}
.dxd-cell-left {
  margin-right: 10px;
}
.user-avatar {
  width: 36px;
  height: 36px;
  border: .5px solid rgba(0, 0, 0, .05);
  border-radius: 4px;
}
.dxd-cell-main {
  -webkit-box-flex: 1;
  flex: 1 0 auto;
}
.dxd-cell-main .sub-title {
  margin-top: 10px;
  color: #666;
  font-weight: 300;
  font-size: 13px;
  line-height: 15px;
}
.dxd-cell-right {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-left: 20px;
  color: #b3b3b3;
  font-size: 14px;
  line-height: 16px;
}
.user-price {
  color: #00c792;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.13;
}
.dxd-cell-hasborder:after {
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  box-sizing: border-box;
  height: 1px;
  background-color: #ebebeb;
  transform: scaleY(.5);
  content: "";
}
.dxd-cell-main .title {
  color: #333;
  font-size: 17px;
  line-height: 19px;
}
.dxd-cell .arrow {
  width: 12px;
  height: 12px;
  color: #ccc;
}
.icon-ic_arrow_little:before {
  content: "\EA27";
}
.pay .public {
  margin-top: 4px;
  color: #999;
  font-size: 12px;
  line-height: 1.17;
}
.pay .public-count {
  color: #fa0;
}
.switch {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 52px;
  height: 30px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input {
  -webkit-appearance: textfield;
}
button, input, textarea {
  border: none;
  outline: none;
}
button, input, textarea {
  color: inherit;
  font: inherit;
}
.switch:before {
  background-color: #fff;
  border-color: #e5e5e5;
}
.switch:after, .switch:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 28px;
  border-radius: 15px;
  transition: transform .3s, -webkit-transform .3s;
  content: " ";
}
.switch:after {
  width: 28px;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.pay .agreement {
  margin: 15px 16px;
  color: #999;
  font-size: 12px;
  line-height: 1.5;
}
.pay .agreement-hotspot, .pay .agreement .checked {
  color: #00c792;
}
.icon-font {
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -.15em;
  fill: currentColor;
}
.pay .agreement-hotspot, .pay .agreement .checked {
  color: #00c792;
}
@supports (padding-top:env(safe-area-inset-bottom)) {
  .iphone-x {
    margin-bottom: env(safe-area-inset-bottom);
  }
}
.iphone-x {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 768px;
}
.pay .payment {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  text-align: center;
  background-color: #fff;
}
.pay .payment-tip {
  -webkit-box-flex: 2;
  flex-grow: 2;
}
.pay .payment-tip-price {
  color: #666;
  font-size: 16px;
  line-height: 1.13;
}
.pay .payment-tip-price .sum {
  color: #00c792;
  font-weight: 500;
}
.pay .payment-tip-text {
  color: #999;
  font-size: 12px;
  line-height: 1.17;
}
.pay .payment-button {
  flex-grow: 7;
  color: #fff;
  font-size: 16px;
  line-height: 49px;
  background-color: #00c792;
}
@supports (padding-top:env(safe-area-inset-bottom)) {
  .iphone-x:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: env(safe-area-inset-bottom);
    background: #fff;
    transform: translateY(env(safe-area-inset-bottom));
    content: " ";
  }
}
.switch:checked {
  background-color: #00c792;
  border-color: #00c792;
}
.pay .preview-content .expand-btn {
  margin-top: 6px;
  color: #4d4d4d;
  font-size: 12px;
  line-height: 14px;
  text-align: right;
}
.pay .preview-content .expand-btn-con {
  display: inline-block;
}
.pay .preview-content .expand-btn .icon-font {
  margin-left: 2px;
}
</style>